<template>
  <div>
    <div v-if="show" class="cus">
      <div class="cus_box" style="width:1000px;" v-loading="loading">
        <div class="title">
          <span>关联Package</span>
          <i @click="show = false" class="el-icon-close"></i>
        </div>
        <div class="content">
          <el-form :inline="true" label-width="auto">
            <el-form-item label="BatteryType" prop="adName">
              <el-select v-model="btType" clearable placeholder="Please Select">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="getData" type="primary">Search</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="tableData"
            height="250"
            highlight-current-row
            border
            @current-change="handleCurrentChange"
            style="width: 100%"
          >
            <el-table-column prop="id" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="mealName" label="Package名" width="180">
            </el-table-column>
            <el-table-column prop="price" label="Package费用">
            </el-table-column>
            <el-table-column prop="days" label="Valid Duration">
            </el-table-column>
            <el-table-column prop="num" label="Replacement Count">
            </el-table-column>
            <el-table-column label="BatteryType">
              <template slot-scope="scope">
                <span>{{ scope.row.btType }}V</span>
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--              prop="address"-->
            <!--              label="已关联车辆">-->
            <!--            </el-table-column>-->
            <el-table-column prop="ctime" label="Update Time">
            </el-table-column>
          </el-table>

          <div class="btns">
            <el-button @click="show = false">Cancel</el-button>
            <el-button type="primary" @click="dataFormSubmit()">关联</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isMobile } from "@/utils/validate";
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error("Phone格式错误"));
      } else {
        callback();
      }
    };
    return {
      btType: "",
      options: [
        { label: "48V", value: 48 },
        { label: "60V", value: 60 },
        { label: "72V", value: 72 }
      ],
      show: false,
      loading: false,
      fileList: [],
      src: "",
      dataForm: {
        adName: "",
        type: "",
        times: "",
        url: "",
        equipmentNos: ""
      },
      equipmentNos_list: [],
      longitude: "",
      latitude: "",
      dataRule: {
        adName: [{ required: true, message: "Please Enter", trigger: "blur" }],
        type: [{ required: true, message: "Please Upload", trigger: "blur" }],
        equipmentNos: [
          { required: true, message: "Please Select", trigger: "blur" }
        ]
      },
      tableData: [],

      deviceId: "",
      mealId: ""
    };
  },
  computed: {},
  components: {},
  props: ["res"],

  mounted() {},
  methods: {
    async getData() {
      const res = await this.apis.mealRent_list({
        pageNum: 1,
        pageSize: 10000,
        btType: this.btType
      });
      const list = res.rows || [];
      this.tableData = list;
    },
    handleCurrentChange(res) {
      console.log(res);
      this.mealId = res.id;
    },
    showFun(ids) {
      this.deviceId = ids.join(",");
      this.show = true;
      this.getData();
    },
    // Form Submit
    async dataFormSubmit() {
      if (!this.mealId) {
        return this.$message({
          type: "error",
          message: "Please SelectPackage！"
        });
      }

      const res = await this.apis.deviceMealShip_save({
        deviceId: this.deviceId,
        mealId: this.mealId
      });

      this.show = false;
    }
  }
};
</script>
<style scoped lang="scss"></style>
